import React, { Component } from 'react';
import Loading from '../../components/Loading';
import './styles.less';
import { fetchRandomData } from '../../services';
import Gallery from '../../components/Gallery';

class RandomMM extends Component {

  state = {
    data: [],
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = () => {

    if (Loading.isLoading()) {
      return;
    }

    Loading.globalLoading();

    fetchRandomData()
      .then((res) => {

        const data = res.results.map((item) => {
          return {
            fileName: item._id,
            title: item.who,
            desc: item.desc,
            imageURL: item.url,
          };
        })

        this.setState({
          data,
        });
        console.log(res.results);
      })
      .then(() => {
        Loading.stopGlobalLoading();
      }, (err) => {
        console.error(err);
        Loading.stopGlobalLoading();
      });

  }

  render() {
    return (
      <div className="random-mm-wrap">
        <div className="refresh" onClick={this.fetchData}>
          Refresh
        </div>
        <div className="main">
          <Gallery imageDatas={this.state.data} />
        </div>
        {/* <pre dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.data, null, 2) }} /> */}
      </div>
    );
  }
}

export default RandomMM;
